<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>笔记</title>
    <style>
      :root {
        --primary: #409eff;
        --danger: #f56c6c;
        --plan: #ecf5ff;
      }
      * {
        padding: 0;
        margin: 0;
      }
      input,
      textarea {
        border-radius: 4px;
        border: 1px solid #a4a4a4;
        padding: 0 10px;
        font-size: 14px;
        height: 28px;
        line-height: 28px;
      }
      div {
        font-weight: 400;
        box-sizing: border-box;
      }
      .fx {
        display: flex;
      }
      .note {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      .note-body {
        flex-flow: column wrap;
      }
      .add-btn {
        margin: 10px 0;
      }
      .btn {
        border-radius: 5px;
        padding: 4px 14px;
        font-size: 14px;
        cursor: pointer;
        width: fit-content;
      }
      .btn-primary {
        border-color: #b3d8ff;
        color: var(--primary);
        background: var(--plan);
      }
      .btn-primary:hover {
        background: var(--primary);
        color: #fff;
      }

      .list {
        flex-flow: column wrap;
        width: 100%;
        min-height: 42px;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
      .list .item {
        padding: 10px;
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
      }
      .list > div:hover {
        background-color: rgba(204, 204, 204, 0.6);
      }
      .list > div:last-child {
        border: none;
      }
      .operate div {
        margin: 0 10px;
        cursor: pointer;
        font-size: 14px;
      }
      .operate .edit:hover {
        color: var(--primary);
      }
      .operate .del:hover {
        color: var(--danger);
      }
      #mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9;
      }

      .pop {
        background-color: white;
        max-width: 400px;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        text-align: center;
      }
      .mask-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
      }
      .ipt {
        width: 100%;
        font-size: 14px;
        padding: 10px;
        align-items: center;
      }
      .ipt span {
        display: inline-block;
        width: 50px;
      }
      #title,
      #content {
        width: calc(100% - 50px);
      }
      #content {
        height: 80px;
      }
      @media (min-width: 768px) {
        .pop {
          width: 600px;
        }
      }
    </style>
  </head>
  <body>
    <div class="note">
      <h1>笔记</h1>
      <div class="note-body fx">
        <div>
          <input type="text" id="search" placeholder="搜索笔记,请输入标题" />
          <div class="add-btn btn btn-primary">新增</div>
        </div>

        <div class="list fx"></div>
      </div>
    </div>

    <div id="mask">
      <div class="pop">
        <div>新增</div>
        <div>
          <div class="ipt fx">
            <span>标题：</span
            ><input type="text" id="title" placeholder="请输入标题" />
          </div>
          <div class="ipt fx">
            <span> 内容： </span>
            <textarea
              rows="4"
              id="content"
              placeholder="请输入笔记内容"
            ></textarea>
          </div>
        </div>
        <div class="mask-footer">
          <div class="close btn btn-primary">关闭</div>
          <div class="confirm btn btn-primary">保存</div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let noteList = JSON.parse(localStorage.getItem("notes")) || [];
    let currentId = null;

    let list = document.querySelector(".list");
    let add = document.querySelector(".add-btn");
    let mask = document.querySelector("#mask");
    let search = document.querySelector("#search");
    let close = document.querySelector(".close");
    let confirm = document.querySelector(".confirm");
    let titleEle = document.querySelector("#title");
    let contentEle = document.querySelector("#content");

    add.addEventListener("click", openPop);
    close.addEventListener("click", closePop);
    confirm.addEventListener("click", confirmPop);
    search.addEventListener("input", debounce(searchNote, 500));

    function createId() {
      return Math.random().toString(36).substr(2, 9);
    }

    function debounce(fn, delay) {
      let timer = null;
      return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      };
    }

    function searchNote() {
      let value = search.value.trim();
      if (value == "") return renderList();
      let listdata = noteList.filter((item) => {
        return item.title.includes(value);
      });
      if (listdata.length > 0) {
        renderList(listdata);
      } else {
        list.innerHTML = "";
        let span = document.createElement("span");
        span.innerHTML = "没有找到相关笔记";
        list.append(span);
      }
    }
    function openPop() {
      mask.style.display = "flex";
    }
    function closePop() {
      mask.style.display = "none";
      titleEle.value = "";
      contentEle.value = "";
    }
    function confirmPop() {
      let t = titleEle.value.trim();
      let c = contentEle.value.trim();
      if (t == "") {
        alert("标题不能为空");
        return;
      }
      let obj = {
        id: createId(),
        title: t,
        content: c,
      };
      if (currentId) {
        let index = noteList.findIndex((item) => item.id == currentId);
        noteList.splice(index, 1, obj);
      } else {
        noteList.push(obj);
      }
      saveNotes();
      searchNote();
      closePop();
    }

    function saveNotes() {
      localStorage.setItem("notes", JSON.stringify(noteList));
    }
    function editNote(data) {
      let { title, content, id } = noteList.find((item) => item.id == data);
      titleEle.value = title;
      currentId = data;
      contentEle.value = content;
      openPop();
    }
    function delNote(data) {
      let index = noteList.findIndex((item) => item.id == data);
      currentId = data;
      let flag = window.confirm(`确定删除"${noteList[index].title}"笔记吗?`);
      if (flag) {
        noteList.splice(index, 1);
        saveNotes();
        searchNote();
      }
    }
    function renderList(listdata = noteList) {
      list.innerHTML = "";
      listdata.forEach((item) => {
        let div = document.createElement("div");
        div.classList.add("item");
        div.classList.add("fx");
        div.innerHTML = `
            <div class="content">${item.title}</div>
            <div class="operate fx">
              <div class="edit" onclick="editNote('${item.id}')">编辑</div>
              <div class="del" onclick="delNote('${item.id}')">删除</div>
            </div>
          `;
        list.appendChild(div);
      });
    }

    renderList();
  </script>
</html>
